<template>
	<view class="container" :style="appThemeStyle">
	  <!-- 标题 -->
	  	  <view class="page-title">预约信息</view>
	  	  <!-- 表单组件 -->
	  	  <view class="form-wrapper">
	  	    <u-form :model="form" ref="uForm" label-width="140rpx">
	  	      <u-form-item label="真实姓名" prop="real_name">
	  	        <u-input v-model="form.real_name" placeholder="请输入真实姓名" />
	  	      </u-form-item>
	  	      <u-form-item label="联系电话" prop="mobile">
	  	        <u-input v-model="form.mobile" placeholder="联系电话" />
	  	      </u-form-item>
	  		  <u-form-item label="年纪" prop="age">
	  		    <u-input v-model="form.age" placeholder="年纪" />
	  		  </u-form-item>
	  		  <u-form-item label="身高" prop="height">
	  			<u-input v-model="form.height" placeholder="cm" />
	  		  </u-form-item>
	  		  <u-form-item label="体重" prop="weight">
	  			<u-input v-model="form.weight" placeholder="kg" />
	  		  </u-form-item>
	  		  <u-form-item label="品牌" prop="bike_brand">
	  			<u-input v-model="form.bike_brand" placeholder="闪电" />
	  		  </u-form-item>
	  		  <u-form-item label="尺寸" prop="bike_size">
	  			<u-input v-model="form.bike_size" placeholder="52" />
	  		  </u-form-item>
	  	    </u-form>
	  	  </view>
	  	  <!-- 操作按钮 -->
	  	  <view class="footer">
	  	    <view class="btn-wrapper">
	  	      <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
	  	    </view>
	  	  </view>
	</view>
</template>

<script>
	import * as FittingApi from '@/api/bike/fitting'
	// 表单验证规则
	const rules = {
		real_name: [{
		  required: true,
		  message: '请输入用户姓名',
		  trigger: ['blur', 'change']
		}],
		mobile: [{
		  required: true,
		  message: '请输入手机号',
		  trigger: ['blur', 'change']
		}]
	}
	export default {
	  data() {
	    return {
	      form: {
			real_name: '',
			mobile: '',
			age:'',
			height:'',
			weight:'',
			bike_brand:'',
			bike_size:''
		  },
	      rules,
	      isLoading: true,
	      disabled: false,
	      bookingId: null
	    }
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad({ bookingId }) {
	    // 当前收货地址ID
	    this.bookingId = bookingId
	    // 获取当前记录详情
	    this.getDetail()
	  },
	
	  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	  onReady() {
	    this.$refs.uForm.setRules(this.rules)
	  },
	
	  methods: {
	
	    // 获取当前记录详情
	    getDetail() {
	      const app = this
	      FittingApi.detail(app.bookingId)
	        .then(result => {
	          const detail = result.data.detail
	          app.createFormData(detail)
	        })
	    },
	
	    // 生成默认的表单数据
	    createFormData(detail) {
	      const { form } = this
	      form.real_name = detail.real_name
		  form.mobile = detail.mobile
		  form.age = detail.age
		  form.weight = detail.weight
		  form.height = detail.height
		  form.bike_brand = detail.bike_brand
		  form.bike_size = detail.bike_size
	    },
	
	    // 表单提交
	    handleSubmit() {
	      const app = this
	      if (app.disabled) {
	        return false
	      }
	      app.$refs.uForm.validate(valid => {
	        if (valid) {
	          app.disabled = true
	          FittingApi.edit(app.bookingId, app.form)
	            .then(result => {
	              app.$toast(result.message)
	              uni.navigateBack()
	            })
	            .finally(() => app.disabled = false)
	        }
	      })
	    }
	
	  }
	}
</script>

<style lang="scss" scoped>
	.page-title {
	  width: 94%;
	  margin: 0 auto;
	  padding-top: 40rpx;
	  font-size: 28rpx;
	  color: rgba(69, 90, 100, 0.6);
	}
	
	.form-wrapper {
	  margin: 20rpx auto 20rpx auto;
	  padding: 0 40rpx;
	  width: 94%;
	  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
	  border-radius: 16rpx;
	  background: #fff;
	}
	
	// 底部操作栏
	.footer {
	  margin-top: 80rpx;
	
	  .btn-wrapper {
	    height: 100%;
	    // display: flex;
	    // align-items: center;
	    padding: 0 20rpx;
	  }
	
	  .btn-item {
	    flex: 1;
	    font-size: 28rpx;
	    height: 86rpx;
	    color: #fff;
	    border-radius: 50rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	  .btn-item-wechat {
	    background: #0ba90b;
	    margin-bottom: 26rpx;
	  }
	
	  .btn-item-main {
	    background: linear-gradient(to right, $main-bg, $main-bg2);
	    color: $main-text;
	
	    // 禁用按钮
	    &.disabled {
	      opacity: 0.6;
	    }
	  }
	
	}
</style>